<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置密码</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="icon" href="/static/img/favicon.png">
</head>
<body>
<div>
    {#导航#}
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="{% url "home" %}">JvHub</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url "home" %}">主站<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'all_live' %}">直播<span class="sr-only">(current)</span></a>
                    </li>
                </ul>
            </div>
        </nav>
        <div>
            <img src="/static/img/head.png" class="d-block w-100" alt="..." style="height: 150px;">
        </div>
    </header>


    <div class="container" style="height: 600px">
        <br>
        <div class="row">
            <div class="col-auto">
                <h3>重置密码:</h3>
            </div>
        </div>
        <br>

        <div class="row">
            <div class="col-3">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                     aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home"
                       role="tab" aria-controls="v-pills-home" aria-selected="true">用户:{{ user }}</a>
                </div>
            </div>
            <div class="col-9">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                         aria-labelledby="v-pills-home-tab">
                        <div class="alert alert-danger" role="alert">
                            请及时输入新密码！！
                        </div>
                        <form id="change_password_form">
                            <div class="form-group" hidden>
                                <input class="form-control" name="user" value="{{ user.id }}">
                            </div>
                            <div class="form-group">
                                <label for="new_password" class="col-form-label">新密码:</label>
                                <i class="bi bi-question-circle text-secondary"
                                   title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                                <input class="form-control" type="password" id="new_password" name="new_password"
                                       required
                                       placeholder="新密码" autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="new_check_password" class="col-form-label">重复密码:</label>
                                <i class="bi bi-question-circle text-secondary"
                                   title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                                <input class="form-control" type="password" id="new_check_password"
                                       name="new_check_password" required
                                       placeholder="重复密码" autocomplete="off">
                            </div>
                            <div class="modal-footer">
                                <div id="change_pwd_error" class="text-danger"></div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="change_pwd_button"
                                        onclick="operation2('#change_password_form','#change_pwd_button','{% url 'forget_pwd' %}','#change_pwd_error')">
                                    提交
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid" style="background-color: #f6f7f8;height: 400px">
        <hr>
        <br>
        <br>
        <div class="row">
            <div class="col-md-4" align="center">
                <a href="#" style="text-decoration-line: unset;color: black">关于我们</a>
                <a href="#" style="text-decoration-line: unset;color: black">联系我们</a>
                <a href="#" style="text-decoration-line: unset;color: black">用户协议</a>
                <a href="#" style="text-decoration-line: unset;color: black">友情链接</a>
                <a href="#" style="text-decoration-line: unset;color: black">加入我们</a>
            </div>
            <div class="col-md-4" align="center">
                <a href="#" style="text-decoration-line: unset;color: black">侵权申诉</a>
                <a href="#" style="text-decoration-line: unset;color: black">活动中心</a>
                <a href="#" style="text-decoration-line: unset;color: black">社区中心</a>
                <a href="#" style="text-decoration-line: unset;color: black">广告合作</a>
            </div>
            <div class="col-md-4" align="center">
                <a href="#" style="text-decoration-line: unset;color: black">客户端下载</a>
                <a href="#" style="text-decoration-line: unset;color: black">新浪微博</a>
                <a href="#" style="text-decoration-line: unset;color: black">官方微信</a>
            </div>
        </div>
        <hr style="width: 70%">
    </div>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script>
        function operation2(form_id, submit_button, url, msg_id) {
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: $(form_id).serialize(),
                async: true,
                beforeSend: function (xhr, setting) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    $(submit_button).attr({disabled: "disabled"});
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        $(msg_id).html(data.msg);
                    } else if (data.status == 'success') {
                        alert(data.msg)
                        window.location.reload()
                    }
                },
                complete: function () {
                    $(submit_button).removeAttr('disabled');
                },
            });
        }
    </script>
</div>
</body>
</html>